<template>
    <div class="share">
        <div class="banner">
            <div class="qrCode">
                <div v-if="note == -10007" id="qrcode" class="img"></div> <!-- 创建一个div，并设置id为qrcode -->
                <div v-if="note != -10007">{{msg}}</div>
            </div>
            <div class="content">请在5分钟内扫描二维码</div>
        </div>
    </div>
</template>

<script>
    import {Dialog, Toast, Loading, Popup} from 'vant';
    import wx from "weixin-js-sdk";
    import QRCode from 'qrcodejs2';
    import {post, basePrefix, getCookie, getStorageObj} from "../../js/utils";
    import qs from 'qs';

    export default {
        name: 'Share',
        components: {},
        data() {
            return {
                note: -10007,
                msg: '',
                devId: this.$route.query.devId,
                shareId: this.$route.query.shareId,
                wifi: [{name: 'wifi1', checked: true}, {name: 'wifi2', checked: true}],
                items: [{name: '下一步'}],
            }
        },
        async mounted() {
            let _this = this
            let jsApiTicket = JSON.parse(Base64.decode(getCookie("jsapiTicket")))
            let param = {
                devId: _this.devId,
                shareId: _this.shareId,
            }
            Object.assign(param, {appId: jsApiTicket.AppId,type: 'share'})
            if (this.$route.query.enter == 'product') {
                this.qrcode();
                wx.config({
                    debug: false,
                    beta: true,
                    appId: jsApiTicket.AppId,
                    timestamp: jsApiTicket.Timestamp,
                    nonceStr: jsApiTicket.NonceStr,
                    signature: jsApiTicket.Signature,
                    jsApiList: [
                        'checkJsApi',
                        'updateAppMessageShareData',
                        'onMenuShareAppMessage'
                    ]
                })
                wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                    wx.updateAppMessageShareData({
                        title: '设备分享二维码', // 分享标题
                        desc: '你有一个设备分享二维码，五分钟有效', // 分享描述
                        link: window.location.href.split("?")[0] + "?" + qs.stringify(param), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: '', // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                    wx.onMenuShareAppMessage({
                        title: '设备分享二维码', // 分享标题
                        desc: '你有一个设备分享二维码，五分钟有效', // 分享描述
                        link: window.location.href.split("?")[0] + "?" + qs.stringify(param), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: '', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            // 用户点击了分享后执行的回调函数
                        }
                    })
                });
            } else {
                let res = {};
                await post("/user/bindWxShareDeviceCheck", {
                    devId: _this.devId,
                    shareId: _this.shareId,
                }).then(
                    ret => {
                        res = ret;
                    }
                ).catch((err) => {
                    Toast.fail(err);
                })
                this.note = res.note
                if (res.note === 0) {
                    let data = {}
                    await post("/user/BindWxShareDevice", {
                        devId: _this.devId,
                        shareId: _this.shareId,
                    }).then(
                        bindWxShareDevice => {
                            data = bindWxShareDevice
                        }
                    ).catch((err) => {
                        Toast.fail(err);
                    })

                    if (data.note === 0) {
                        this.msg = '绑定成功'
                    } else if (data.note === -10003) {
                        this.msg = '用户不合法或分享链接已失效'
                    } else if (data.note === -10004) {
                        this.msg = '您设备已绑定'
                    } else if (data.note === -10006) {
                        this.msg = '当前用户不存在'
                    } else if (data.note === -10008) {
                        this.msg = '一般错误'
                    } else if (data.note === -10007) {
                        this.qrcode()
                    }

                } else if (res.note === -10003) {
                    this.msg = '用户不合法或分享链接已失效'
                } else if (res.note === -10004) {
                    this.msg = '您设备已绑定'
                } else if (res.note === -10006) {
                    this.msg = '当前用户不存在'
                } else if (res.note === -10008) {
                    this.msg = '一般错误'
                } else if (res.note === -10007) {
                    this.qrcode()
                }
            }
        },
        methods: {
            qrcode: function () {
                let _this = this
                let param = {
                    devId: _this.devId,
                    shareId: _this.shareId,
                }
                let jsApiTicket = JSON.parse(Base64.decode(getCookie("jsapiTicket")))
                Object.assign(param, {appId: jsApiTicket.AppId,type: 'share'})
                let qrcode = new QRCode('qrcode', {
                    text: window.location.href.split("?")[0] + "?" + qs.stringify(param), // 当前页面扫码事件
                    colorDark: "#000",
                    colorLight: "#fff",
                })
            },
        }
    }
</script>

<style scoped>
    .share > .banner {
        padding-top: 25vh;
        width: 100vw;
        height: 100vh;
    }

    .share > .banner > .qrCode {
        width: 78vw;
        height: 78vw;
        margin: 0 auto;
        background: url(../../assets/share_bg1.png) no-repeat center;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .share > .banner > .qrCode > .img {
        background-color: #fff;
        padding: 6px;
    }

    .share > .banner > .qrCode > img {
        align-self: center;
    }

    .share > .banner > .content {
        padding-top: 2vh;
    }
</style>
